<template>
  <div class="blog-container">
    <!-- 动态内容区域 -->
    <div class="content-section">
      <div class="posts-wrapper">
        <el-card v-for="post in posts" :key="post.bid" class="post-item">
          <div class="post-header">
            <img :src="post.avatar" class="avatar" alt="Avatar" />
            <div>
              <span class="username">{{ post.name }}</span>
              <span class="post-time">{{ post.time }}</span>
            </div>
          </div>
          <div class="post-content">
            <p>{{ post.content }}</p>
            <img v-if="post.image" :src="post.image" class="post-image" alt="Post Image" />
          </div>
          <div class="post-actions">
            <el-button type="text" icon="el-icon-thumb" @click="likePost(post.bid)">
              {{ post.likesNumber }} 点赞
            </el-button>
            <el-button type="text" icon="el-icon-message" @click="toggleComments(post.bid)">
              {{ post.commentsNumber }} 评论
            </el-button>
            <el-button type="text" icon="el-icon-share" @click="sharePostToWeibo(post)">分享</el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 右下角写博客按钮 -->
    <el-button
      class="write-blog-btn" 
      type="primary"
      icon="el-icon-edit"
      circle
      @click="openBlogDialog"
    ></el-button>

     <!-- 写博客对话框   -->
    <el-dialog title="写博客" :visible.sync="dialogVisible">
      <el-form :model="newPost">
        <el-form-item label="内容">
          <el-input
            type="textarea"
            rows="5"
            v-model="newPost.content"
            placeholder="分享你的旅行故事..."
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
        <el-upload
        class="upload-demo"
        action=""
        list-type="picture-card"
        :file-list="newPost.imageList"
        :auto-upload="false"
        :on-change="handleImageChange"
        :on-remove="handleImageRemove"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="pushBlog">发布</el-button>
      </div>
    </el-dialog>


    <!-- 评论 -->
    <div v-if="isModelVisible" class="modal-overlay">
    <div class="modal-content">
      <div class="modal-header">
        <span class="modal-title">评论信息</span>
        <span class="close-button" @click="handleClose">X</span>
      </div>
      <div class="modal-body">
        <div v-for="comment in comments" :key="comment.cid" class="comment-card">
          <div class="comment-uid"> {{ comment.commentname }}</div>
          <div class="comment-content">{{ comment.comment }}</div>
        </div>
      </div>
      <div class="modal-footer">
        <textarea v-model="commentContent" placeholder="请输入评论" class="comment-input"></textarea>
        <button :disabled="!commentContent.trim()" class="submit-button" @click="handleSubmit">发表</button>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import { selectAllBlogs,likePost,selectAllComments,pushComment,pushBlog } from '@/api/blog';
export default {
  
  data() {
    return {
      //评论
      isModelVisible: false,
      commentContent: '',
      comentBid:'',
      comments: [
      {
      "cid": 1,
      "uid": "1471314385",
      "bid": 1,
      "time": "2024-12-11T21:07:30.000+00:00",
      "comment": "之前我就想去江西来着，没想到这么漂亮，更想去了！",
      "commentname": "石桥"
    }
      ],

      //发布新的blog
      dialogVisible: false,
      newPost: {
        content: "",
        imageList:[],
      },
      posts: [
      {
      "bid": 1,
      "uid": "2771651667",
      "time": "2024-12-06T01:54:48.000+00:00",
      "image": "https://loremflickr.com/400/400?lock=8424403570849280",
      "content": "今日出游",
      "likesNumber": 100,
      "commentsNumber": 100,
      "name": "会飞的猪",
      "avatar": "https://loremflickr.com/400/400?lock=8424403570849280",
      "like_status": 1
    },
    {
      "bid": 2,
      "uid": "1471314386",
      "time": "2024-12-16T14:36:22.000+00:00",
      "image": "https://loremflickr.com/400/400?lock=8424403570849280",
      "content": "明日日日出游",
      "likesNumber": 200,
      "commentsNumber": 7,
      "name": "会飞的俞",
      "avatar": "https://loremflickr.com/400/400?lock=8424403570849280",
      "like_status": 1
    }
      ],
    };
  },
  mounted(){
      console.log('加载完毕')
      selectAllBlogs().then(res=>{
        this.posts=res.data.data
      })
      
    },
  methods: {

    sharePostToWeibo(post) {
    const postUrl = window.location.href;  // 当前页面的 URL
    const weiboShareUrl = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(postUrl)}&title=${encodeURIComponent(post.name)}&content=${encodeURIComponent(post.content)}`;
    
    // 打开微博分享页面
    window.open(weiboShareUrl, '_blank');
  },
    //评论
    handleClose() {
      this.isModelVisible = false;
    },
    handleSubmit() {
      if (!this.commentContent.trim()) return;
      
      // this.comments.unshift({
      //   uid: `USER_${Math.floor(Math.random() * 100000)}`,
      //   content: this.commentContent.trim()
      // });
      const par={
        bid:this.comentBid,
        comment:this.commentContent
      };
      pushComment(par);
      this.commentContent = '';
    }
   ,
    //blog
    openBlogDialog() {
      this.dialogVisible = true;
    }
    ,
    pushBlog() {
  const formData = new FormData();

  // 将图片文件添加到 FormData
  if (this.newPost.imageList && this.newPost.imageList.length > 0) {
    formData.append('image', this.newPost.imageList[0].raw); // 使用 raw 获取原始文件
  }

  // 将博客文本内容作为 JSON 字符串添加到 FormData
  formData.append('blog', JSON.stringify({
    content: this.newPost.content
  }));

  // 发起上传请求
  pushBlog(formData)
    .then((res) => {
      if (res.data.code === 1) {
        this.dialogVisible = false; // 关闭对话框
        this.newPost = { content: "", imageList: [] }; // 重置表单
        this.$message.success("发布成功！");
        selectAllBlogs().then(res=>{
        this.posts=res.data.data
      })
      } else {
        this.$message.error(res.data.message || "发布失败！");
      }
    })
    .catch((error) => {
      console.error("上传失败", error);
      this.$message.error("上传失败，请重试！");
    });
},
    likePost(bid) {
      console.log(bid)
      likePost(bid)
      .then(res=>{
        if(res.data.code===1){
          selectAllBlogs().then(res=>{
        this.posts=res.data.data
      })
          // const post = this.posts.find((p) => p.bid === bid);
          // if (post) post.likesNumber += 1;
       }
      })
    },
    toggleComments(bid) {
      selectAllComments(bid)
      .then(res=>{
        this.comments=res.data.data
      })
      this.comentBid=bid;
      this.isModelVisible=true;
    },
    handleImageChange(file, fileList) {
  this.newPost.imageList = fileList;
},
handleImageRemove(file, fileList) {
  this.newPost.imageList = fileList;
},

  },
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  width: 800px;
  max-height: 600px;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
}

.close-button {
  cursor: pointer;
  font-size: 18px;
  color: #999;
  padding: 5px;
  transition: color 0.3s;
}

.close-button:hover {
  color: #333;
}

.modal-body {
  flex-grow: 1;
  overflow-y: auto;
}

.comment-card {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comment-uid {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.comment-content {
  font-size: 16px;
  color: #333;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-input {
  width: 100%;
  height: 60px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  resize: none;
}

.submit-button {
  padding: 8px 16px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
/* 主体布局 */
.blog-container {
  display: flex;
  justify-content: center; /* 居中容器内容 */
  padding: 20px;
  min-height: 100vh; /* 设置最小高度为100vh，确保页面填满 */
  background-color: #f9f9f9;
  flex-direction: column;
  align-items: center; /* 居中页面内容 */
}

.content-section {
  width: 100%; /* 设置内容区宽度为100% */
  max-width: 800px; /* 设置最大宽度为700px，避免过宽 */
  margin: 0 auto; /* 自动左右居中 */
}

/* 帖子容器 */
.posts-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中所有帖子 */
}

.post-item {
  width: 100%; /* 确保每个帖子宽度不超过容器宽度 */
  max-width:600px; /* 设置帖子最大宽度，缩小卡片 */
  margin-bottom: 5px;
  padding: 5px; /* 缩小卡片的内边距 */
  border-radius: 8px;
  background: linear-gradient(135deg, #f9fffc, #eef7ff);
  border: 1px solid #d9e2ec;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 其他帖子样式 */
.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 8px;
}

.username {
  font-weight: bold;
  margin-right: 8px;
  color: #ff6f61;
}

.post-time {
  color: #888;
}

.post-content {
  margin-bottom: 0px;
  font-size: 20px;
}

.post-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid #cce5ff;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.el-button {
  font-size: 12px;
  color: #007bff;
}

.write-blog-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #ff6f61;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
</style>
